<template>
    <div class="search_box">
        <input type="text" class="search_input" @input="change_value($event)">
    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex';
export default {
    name : "Search",
    computed : {
        ...mapGetters(['get_searchValue'])
    },
    methods : {
        ...mapActions(['change_searchValue' , "change_filter" , 'get_search']),
        change_value : function(e){
            var value = e.target.value
            this.change_searchValue(value)
            this.change_filter('搜索的结果')
            this.get_search(value)
        }
    }
}
</script>

<style>
.search_box{
    width: 25%;
    height: 100%;
    padding:0.3em 0.3em;
    box-sizing: border-box;
    display: flex;
    border-left: 1px solid white;
}
.search_input{
    flex-grow: 1;
    border-radius: 0.4em;
    border: none;
    outline: none;
    text-indent: 0.5em;
    font-size: 0.8em;
}
</style>